import React from 'react';
import './ConfirmModal.css';

interface ConfirmModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string;
}

const ConfirmModal: React.FC<ConfirmModalProps> = ({ 
  isOpen, 
  onClose, 
  onConfirm, 
  title, 
  message 
}) => {
  if (!isOpen) return null;

  // 阻止模态框内容点击时关闭模态框
  const handleContentClick = (e: React.MouseEvent) => {
    e.stopPropagation();
  };

  return (
    <div className="confirm-overlay" onClick={onClose}>
      <div className="confirm-container" onClick={handleContentClick}>
        <div className="confirm-header">
          <h3 className="confirm-title">{title}</h3>
          <button className="confirm-close" onClick={onClose}>
            &times;
          </button>
        </div>
        
        <div className="confirm-body">
          <p className="confirm-message">{message}</p>
        </div>
        
        <div className="confirm-footer">
          <button className="confirm-cancel" onClick={onClose}>
            取消
          </button>
          <button className="confirm-ok" onClick={onConfirm}>
            确定
          </button>
        </div>
      </div>
    </div>
  );
};

export default ConfirmModal;